<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="订单号" prop="s_order_no">
          <el-input v-model="queryParams.s_order_no" placeholder="请输入订单号" clearable @keyup.enter="handleQuery()" />
        </el-form-item>

        <el-form-item label="支付状态" prop="pay_status">
          <el-select v-model="queryParams.pay_status" placeholder="全部" clearable class="!w-[180px]">
            <el-option label="未支付" :value="1" />
            <el-option label="支付中" :value="2" />
            <el-option label="已支付" :value="3" />
            <el-option label="用户取消" :value="4" />
            <el-option label="超时取消" :value="5" />
          </el-select>
        </el-form-item>

        <el-form-item label="付款人手机" prop="s_payer_tel">
          <el-input v-model="queryParams.s_payer_tel" placeholder="手机号" clearable @keyup.enter="handleQuery()" />
        </el-form-item>

        <el-form-item label="创建时间" prop="date">
          <el-date-picker v-model="date" value-format="x" type="datetimerange" range-separator="-"
            :default-time="defaultTime2" start-placeholder="开始时间" end-placeholder="结束时间" />
        </el-form-item>
        <el-form-item label="订单类型" prop="order_type">
          <el-select v-model="queryParams.order_type" placeholder="全部" clearable class="!w-[180px]">
            <el-option label="水表充值" :value="1" />
            <el-option label="其他订单" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery()">
            <template #icon>
              <Search />
            </template>
            搜索
          </el-button>
          <el-button @click="handleResetQuery()">
            <template #icon>
              <Refresh />
            </template>
            重置
          </el-button>
          <exportFile type="order_main" :data="queryParams"></exportFile>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <div class="flex-x-between mb-10px">
        <div>
          <el-button v-hasPerm="['/admin/order/add']" type="success" icon="plus" @click="handleOpenDialog()">
            新建订单
          </el-button>
          <el-button :disabled="selectIds.length === 0" v-hasPerm="['/admin/order/del']" type="danger" icon="delete"
            @click="handleDelete()">
            删除
          </el-button>
        </div>

      </div>
      <el-table ref="dataTableRef" v-loading="loading" :data="pageData" highlight-current-row
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="id" prop="id" width="100" />
        <el-table-column label="订单号" prop="order_no" width="220" />
        <el-table-column label="支付状态" prop="pay_status" width="120">
          <template #default="scope">
            <span v-if="scope.row.pay_status == 1">未支付</span>
            <span v-else-if="scope.row.pay_status == 2">支付中</span>
            <span v-else-if="scope.row.pay_status == 3">已支付</span>
            <span v-else-if="scope.row.pay_status == 4">用户取消</span>
            <span v-else-if="scope.row.pay_status == 5">超时取消</span>
          </template>
        </el-table-column>
        <el-table-column label="订单类型" prop="order_type" width="120">
          <template #default="scope">
            <span v-if="scope.row.order_type == 1">水表充值</span>
            <span v-if="scope.row.order_type == 2">其他订单</span>
          </template>
        </el-table-column>
        <el-table-column label="金额" prop="amount" width="140" />
        <el-table-column label="付费用户手机号" prop="payer_tel" width="140">
          <template #default="scope">
            {{ scope.row.payer_aud == 5 ? '匿名用户' : scope.row.payer_tel }}
          </template>
        </el-table-column>
        <el-table-column label="户头信息" min-width="250">
          <template #default="scope">
            <span v-if="scope.row.water_meter_info != null && scope.row.water_meter_info">
              {{ scope.row?.water_meter_info?.code }} - {{ scope.row?.water_meter_info?.holder_username }} - {{
                scope.row?.water_meter_info?.holder_tel }}
            </span>
            <span v-else>\</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="created_at" width="180">
          <template #default="scope">
            {{ formatTimestamp(scope.row.created_at * 1000) }}
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="180">
          <template #default="scope">
            <div class="flex items-center justify-center">
              <el-button v-if="scope.row.order_type == 2" type="primary" size="small" link icon="Document"
                @click="handleisShow(scope.row)">
                收据
              </el-button>
              <el-dropdown class="ml-2" trigger="click" v-if="scope.row.pay_status == 1"
                v-hasPerm="['/admin/order/prepayForAdmin']">
                <span class="el-dropdown-link flex items-center">
                  <el-button type="primary" size="small" link>支付</el-button>
                  <el-icon class="el-icon--right" color="#4080FF">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="hanclePay(scope.row, 30)">微信支付</el-dropdown-item>
                    <el-dropdown-item @click="hanclePay(scope.row, 50)">线下支付</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>

              <el-button v-hasPerm="['/admin/order/del']" type="danger" icon="delete" link size="small"
                @click="handleDelete(scope.row.id)">
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.page" v-model:limit="queryParams.ps"
        @pagination="handleQuery()" />
    </el-card>

    <!-- 用户表单 -->
    <el-dialog :close-on-click-modal="false" v-model="dialog.visible" :title="dialog.title" append-to-body
      @close="handleCloseDialog">
      <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
        <el-form-item label="订单类型" prop="order_type">
          <el-radio-group v-model="formData.order_type">
            <el-radio :value="1" label="水表充值订单" />
            <el-radio :value="2" label="其他收费订单" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="订单用户" prop="payer_aud">
          <el-radio-group v-model="formData.payer_aud">
            <el-radio :value="3" label="注册用户" />
            <el-radio :value="5" label="匿名用户" />
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="formData.payer_aud == 3" label="付款用户id" prop="payer_id">
          <table-select v-if="dialog.visible" class="!w-[100%]" :text="userData" :select-config="user"
            @confirmClear="handleUserClear" @confirm-click="handleUserConfirm">
          </table-select>
        </el-form-item>
        <el-form-item label="金额" prop="amount">
          <el-input :disabled="formData.order_type == 2 ? true : false" v-model="formData.amount" placeholder="请输入金额" />
        </el-form-item>
        <el-form-item label="水表id" prop="water_meter_id">
          <table-select v-if="dialog.visible" class="!w-[100%]" :text="text" :select-config="selectConfig"
            @confirmClear="handleClear" @confirm-click="handleConfirm">
          </table-select>
        </el-form-item>

        <template v-if="formData.order_type == 2">
          <el-form-item :label="`收费(${index + 1})`" v-for="(item, index) in formData.amount_detail" :key="item.id"
            label-width="80px">
            <div style="width: 100%;">
              <el-row :gutter="20">
                <el-col :span="24" class="mb-2">
                  <el-form-item label="费用类型">
                    <el-radio-group @change="hanldeAnountType($event, index)" v-model="item.amount_type">
                      <el-radio :value="1" label="基础费" />
                      <el-radio :value="2" label="滞纳金" />
                      <el-radio :value="3" label="材料费" />
                      <el-radio :value="4" label="工程费" />
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="24" class="mb-2">
                  <el-form-item label="费用名称">
                    <el-input readonly v-model="item.name" placeholder="请输入费用名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="24" class="mb-2">
                  <el-form-item label="金额">
                    <el-input @input="hanldeAmountAll" v-model="item.amount" placeholder="请输入金额" />
                  </el-form-item>
                </el-col>
                <el-col :span="24" class="mb-2">
                  <el-form-item label="备注">
                    <el-input v-model="item.remark" placeholder="请输入备注" />
                  </el-form-item>
                </el-col>
                <el-col :span="24" class="mb-2 text-right">
                  <el-button @click="hanldeDelChoice(index)" v-if="index > 0" type="danger">删除选项</el-button>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="flex">
              <el-button type="primary" @click="addAmountDetail">新增选项</el-button>
              <span>（最多添加10个选项）</span>
            </div>
          </el-form-item>
        </template>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="handleCloseDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="isPay" width="283" title="微信支付" append-to-body @close="handleClosePay">
      <div class="border-b-black border p-2 border-r h-[250px]">
        <QRCode ref="qrcode" :value="qrValue" :size="230" />
      </div>
      <div class="text-center text-[16px] mt-2 text-[red]">{{ payData.amount }}</div>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" style="background-color: #edf3f9 !important;" v-model="isShow" title="收据"
      width="900px" append-to-body @close="handleClose" top="1%">
      <img :src="imageUrl" class="imageUrl" width="860px" height="560px" alt="">
      <div ref="card" class="p-3 card bg-[#fff]">
        <div class="shoubox">
          <div class="border-[#000]">
            <div class="text-box">
              <div>第一联 存根(白)</div>
              <div class="mt-4">第二联 客户(红)</div>
            </div>
            <div class="text-center text-[24px]">
              <span class="border-b-1">{{ rush_title }}</span>
            </div>
            <div class="flex mt-5 mb-1 justify-between">
              <div class="flex-1">户名：{{ rowData?.water_meter_info?.holder_username }}</div>
              <div class="flex-1 text-center">开票日期：{{ formatTimestamp() }}</div>
              <div class="flex-1 text-right">No：{{ rowData?.id?.toString().padStart(7, '0') }}</div>
            </div>
            <div class="border-t border-l border-r border-[#000]">
              <div class="table-th flex border-b border-[#000]">
                <div class="flex-1 flex text-center items-center h-[75px] justify-center"> 项目名称</div>
                <div class="w-[280px]">
                  <div class="text-center p-2 border-l border-[#000]">金 额</div>
                  <div class="flex text-center border-t border-[#000]">
                    <span class="flex-1 p-2 border-l border-[#000]">万</span>
                    <span class="flex-1 p-2 border-l border-[#000]">千</span>
                    <span class="flex-1 p-2 border-l border-[#000]">百</span>
                    <span class="flex-1 p-2 border-l border-[#000]">十</span>
                    <span class="flex-1 p-2 border-l border-[#000]">元</span>
                    <span class="flex-1 p-2 border-l border-[#000]">角</span>
                    <span class="flex-1 p-2 border-l border-[#000]">分</span>
                  </div>
                </div>
              </div>

              <div v-for="item in tableData">
                <div class="flex border-b border-[#000]">
                  <div class="flex-1 flex justify-center items-center"> {{ item.name }}</div>
                  <div class="w-[280px]">
                    <div class="flex text-center">
                      <span class="flex-1 p-2 border-l border-[#000]">{{ item.wan }}</span>
                      <span class="flex-1 p-2 border-l border-[#000]">{{ item.qian }}</span>
                      <span class="flex-1 p-2 border-l border-[#000]">{{ item.bai }}</span>
                      <span class="flex-1 p-2 border-l border-[#000]">{{ item.shi }}</span>
                      <span class="flex-1 p-2 border-l border-[#000]">{{ item.yuan }}</span>
                      <span class="flex-1 p-2 border-l border-[#000]">{{ item.jiao }}</span>
                      <span class="flex-1 p-2 border-l border-[#000]">{{ item.fen }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="flex border-b border-[#000]">
                <div class="w-[200px] p-2 text-center border-r border-[#000]">合计金额（大写）</div>
                <div class="p-2 flex">
                  <div class="w-[400px] flex items-center">
                    <img class="w-[18px] h-[18px] mr-1" src="@/assets/images/cuo.png" alt="">
                    {{ numberConver(Number(rowData.amount)) }}
                  </div>
                  <div>(小写) ￥{{ rowData.amount }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex  reamck">
            <div class="w-[60px] reamck-text">备 注</div>
            <div class="p-1">{{ remarkText }}</div>
          </div>
          <div class="flex justify-between mt-1">
            <div class="flex items-center flex-1 select-box">
              <div class="w-[70px]">收款人：</div>
              <table-select v-if="isShow" class="!w-[100%]" :text="emData" :select-config="meterReader"
                @confirmClear="handlemeClear" @confirm-click="handlemeConfirm">
              </table-select>
              <div class="select"></div>
            </div>
            <div>开票人：<el-input v-model="inputText2" class="no-border-input" style="width: 200px;border: none;"
                placeholder="开票人,点击可编辑" /></div>
          </div>
        </div>

      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="qrcodeLoading" type="primary" @click="handlePrint">打 印</el-button>
          <el-button :loading="qrcodeLoading" type="primary" @click="handleSubmitQrCode">下 载</el-button>
          <el-button @click="handleClose">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Order",
  inheritAttrs: false,
});

import meteAPI, { Form, IUser, PageVO, amountType, metePageQuery } from "@/api/system/order";
import exportFile from '@/components/exportFile/index.vue';
import { useUserStore } from "@/store";
import { convertToMoneyArray, formatTimestamp, numberConver } from '@/utils/index';
import { ElLoading } from "element-plus";
import html2canvas from "html2canvas";
import QRCode from 'qrcode.vue';
import meterReader from "./config/meterReader";
import selectConfig from "./config/select";
import user from "./config/user";
const userStore = useUserStore();

const queryFormRef = ref(ElForm);
const pageData = ref<PageVO[]>([]);
const formRef = ref(ElForm);
const loading = ref(false);
const total = ref(0);
const inputText = ref("");
const inputText2 = ref("");
const qrValue = ref<string>('');  // 二维码的内容
const isPay = ref(false);
const payData = ref<any>({});
const isShow = ref(false);
const qrcodeLoading = ref(false);
const tableData = ref<any>([]);
const rowData = ref<any>({})
const card = ref<any>(null);
const rush_title = ref("成都市武侯区机投自来水经营服务站收款凭据");
const handleClose = () => {
  isShow.value = false;
  tableData.value = [];
  inputText.value = "";
  inputText2.value = "";
  handlemeClear();
}

const defaultTime2: [Date, Date] = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
] // '00:00:00', '23:59:59'

const emRow = ref<any>("");
const emData = computed(() => {
  if (emRow.value !== "") {
    return emRow.value
      ? `${emRow.value.name}`
      : "";
  }
});

const handlemeConfirm = (data: any) => {
  emRow.value = data[0];
  inputText.value = data[0].name;
}

const handlemeClear = () => {
  emRow.value = ""
  inputText.value = "";
}

const handlePrint = () => {
  if (inputText.value == "") {
    ElMessage.warning('请输入收款人');
    return;
  }

  if (inputText2.value == "") {
    ElMessage.warning('请输入开票人');
    return;
  }
  html2canvas(card.value).then((canvas) => {
    // 将canvas转化为图片并下载
    imageUrl.value = canvas.toDataURL();

    if (imageUrl.value) {
      // 打开一个新的打印窗口
      setTimeout(() => {
        const printWindow: any = window.open('', '', 'width=1000,height=800');
        // 将生成的图片插入到打印窗口
        printWindow.document.write('<html><head><title>打印截图</title></head><body>');
        printWindow.document.write('<img src="' + imageUrl.value + '" style="width:860px; height:560px;">');
        printWindow.document.write('</body></html>');
        printWindow.document.close();

        // 等待窗口加载完成后触发打印
        printWindow.print();
      })
    }
  })
}

/**
 * 删除用户
 *
 * @param id  用户ID
 */
function handleDelete(id?: number) {
  let userIds = id ? [id] : selectIds.value;
  if (!userIds) {
    ElMessage.warning("请勾选删除项");
    return;
  }

  ElMessageBox.confirm("确认操作无误?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(
    function () {
      loading.value = true;
      meteAPI.getPageorderDel({ ids: userIds })
        .then(() => {
          ElMessage.success("删除成功");
          handleResetQuery();
        })
        .finally(() => (loading.value = false));
    },
    function () {
      ElMessage.info("已取消删除");
    }
  );
}

// 换行规则
let objectSpanMethod: any = "";
let payPlatText = ref("");
let remarkText = ref("");
let imageUrl = ref("");
const handleisShow = (row: any) => {
  inputText2.value = userStore.userInfo.info.nickname;
  isShow.value = true;
  qrcodeLoading.value = true;
  meteAPI.getPageInfo({ id: row.id }).then((res: any) => {
    payPlatText.value = res?.trade_info?.pay_plat == 50 ? "线下支付" : "微信支付"
    tableData.value = res.order_main.amount_detail;
    let remark: any = [];
    res.order_main.amount_detail.forEach((n: any, i: number) => {
      let p = convertToMoneyArray(Number(n.amount));
      tableData.value[i].wan = p[0];
      tableData.value[i].qian = p[1];
      tableData.value[i].bai = p[2];
      tableData.value[i].shi = p[3];
      tableData.value[i].yuan = p[4];
      tableData.value[i].jiao = p[5];
      tableData.value[i].fen = p[6];
    })
    remarkText.value = res.order_main.amount_detail[0].remark;
    // 换行规则
    objectSpanMethod = ({
      rowIndex,
      columnIndex,
    }: any) => {
      if (rowIndex === tableData.value.length - 1) {
        if (columnIndex === 1) {
          return [2, 8]
        }
      }
    }

    rowData.value = row;
    setTimeout(() => {
      if (card.value) {
        html2canvas(card.value).then((canvas) => {
          // 将canvas转化为图片并下载
          imageUrl.value = canvas.toDataURL();
        })
      }
    }, 0);
    qrcodeLoading.value = false;
  })
}

// 下载收据
const handleSubmitQrCode = () => {
  if (inputText.value == "") {
    ElMessage.warning('请输入收款人');
    return;
  }

  if (inputText2.value == "") {
    ElMessage.warning('请输入开票人');
    return;
  }

  qrcodeLoading.value = true;
  if (card.value) {
    html2canvas(card.value).then((canvas) => {
      // 将canvas转化为图片并下载
      const link = document.createElement('a')
      link.href = canvas.toDataURL('image/png')
      link.download = `${Date.now()}.png`
      link.click()
      qrcodeLoading.value = false;
      inputText.value = "";
      inputText2.value = "";
    })
  }
}

// 删除选项
const hanldeDelChoice = (index: number) => {
  formData.amount_detail.splice(index, 1);
}

// 新增选项
const addAmountDetail = () => {
  if (formData.amount_detail.length >= 10) {
    ElMessage.warning('选项不能超过10个');
    return;
  }
  formData.amount_detail.push(
    {
      name: "",
      amount_type: null,
      amount: "",
      remark: ""
    }
  );
}

// 获取
const hanldeAmountAll = () => {
  let total: number = 0;
  formData.amount_detail.forEach(item => {
    total += Number(item.amount)
  })
  formData.amount = total.toFixed(2);
}

const hanldeAnountType = (e: any, index: number) => {
  switch (e) {
    case 1:
      formData.amount_detail[index].name = amountType.JCF
      break;
    case 2:
      formData.amount_detail[index].name = amountType.ZNJ
      break;
    case 3:
      formData.amount_detail[index].name = amountType.CLF
      break;
    case 4:
      formData.amount_detail[index].name = amountType.GCF
      break;
  }
}


let date = ref([]);
const queryParams = reactive<metePageQuery>({
  page: 1,
  ps: 10,
  s_order_no: "",
  pay_status: "",
  s_payer_tel: "",
  created_at_gte: "",
  created_at_lte: "",
  order_type: ""
});

const dialog = reactive({
  visible: false,
  title: "新增订单",
});

// 选中的ID
const selectIds = ref<number[]>([]);

const formData = reactive<Form>({
  // 订单类型
  order_type: 1,
  // 订单用户
  payer_aud: 3,
  // 用户id
  payer_id: '',
  // 金额
  amount: '',
  // 水表id
  water_meter_id: '',
  // 其他类型
  amount_detail: [
    {
      name: "",
      amount_type: null,
      amount: "",
      remark: ""
    }
  ]
});

const selected = ref<any>("");

// 确定
function handleConfirm(data: IUser[]) {
  selected.value = data[0];
  formData.water_meter_id = data[0].id;
}

// 清空
const handleClear = () => {
  selected.value = "";
  formData.water_meter_id = "";
}

// 用户id
const userRow = ref<any>("");
const handleUserConfirm = (data: IUser[]) => {
  userRow.value = data[0];
  formData.payer_id = data[0].id;
}

// 清空
const handleUserClear = () => {
  userRow.value = "";
  formData.payer_id = "";
}

// 水表信息
const text = computed(() => {
  if (selected.value !== "") {
    return selected.value
      ? `${selected.value.code} -${selected.value.holder_username} - ${selected.value.holder_tel}`
      : "";
  }
});

// 用户回显
const userData = computed(() => {
  if (userRow.value !== "") {
    return userRow.value
      ? `${userRow.value.nickname} -${userRow.value.tel}`
      : "";
  }
});

const rules = reactive({
  name: [{ required: true, message: "抄表员姓名不能为空", trigger: "blur" }],
  tel: [{ required: true, message: "手机号，用来登录抄表员终端", trigger: "blur" }],
  login_secret: [{ required: true, message: "请输入密码", trigger: "blur" }]
});

/**
 * 打开弹窗
 *
 * @param id 用户ID
 */
async function handleOpenDialog() {
  dialog.visible = true;
  dialog.title = "新增订单";
}

// 关闭弹窗
function handleCloseDialog() {
  dialog.visible = false;
  formRef.value.resetFields();
  formRef.value.clearValidate();
  selected.value = "";
  formData.water_meter_id = "";
  userRow.value = "";
  formData.payer_id = "";
  formData.amount_detail = [
    {
      name: "",
      amount_type: null,
      amount: "",
      remark: ""
    }
  ]
}

// 提交表单（防抖）
const handleSubmit = useDebounceFn(() => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      loading.value = true;
      if (formData.payer_aud == 5) {
        formData.payer_id = ""
      }

      meteAPI.add(formData)
        .then(() => {
          ElMessage.success("新增成功");
          handleCloseDialog();
          handleResetQuery();
        })
        .finally(() => (loading.value = false));
    }
  });
}, 1000);


// 选中项发生变化
function handleSelectionChange(selection: any[]) {
  selectIds.value = selection.map((item) => item.id);
}

// 打开支付弹窗
function hanclePay(row: any, pay_plat: number) {
  if (pay_plat == 30) {
    meteAPI.getPay({
      order_no: row.order_no,
      pay_plat
    }).then((res: any) => {
      qrValue.value = res.pay_data.code_url;
      isPay.value = true;
      payData.value = res;
    })
  } else if (pay_plat == 50) {
    ElMessageBox.confirm(
      '请确认收款金额等信息无误?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      const loading = ElLoading.service({
        lock: true,
        text: '加载中...',
        background: 'rgba(0, 0, 0, 0.7)',
      })

      meteAPI.getPay({
        order_no: row.order_no,
        pay_plat
      }).then((res: any) => {

        setTimeout(() => {
          handleResetQuery();
          ElMessage.success("操作成功");
          loading.close()
        }, 2000);
      })
    }).catch(() => {
    })
  }
}

// 关闭弹窗
const handleClosePay = () => {
  isPay.value = false;
}

/** 查询 */
function handleQuery() {
  loading.value = true;

  if (date.value.length > 0) {
    queryParams.created_at_gte = date.value[0] / 1000;
    queryParams.created_at_lte = date.value[1] / 1000;
  }

  meteAPI.getPage(queryParams)
    .then((data) => {
      pageData.value = data.data;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/** 重置 */
function handleResetQuery() {
  queryFormRef.value!.resetFields();
  queryParams.page = 1;
  date.value = [];
  queryParams.created_at_gte = "";
  queryParams.created_at_lte = "";
  handleQuery();
}

onMounted(() => {
  handleQuery();
});
</script>

<style scoped>
.shoubox {
  position: relative;
  padding-right: 30px;
}

.text-box {
  position: absolute;
  right: 2px;
  width: 25px;
  /* padding-top: 50px; */
  top: 25px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.card {
  width: 860px;
  height: 560px;
}

.imageUrl {
  position: absolute;
  left: -1000%;
}

.card :deep(.el-input__inner) {
  height: 25px;
}

.card :deep(.el-input__wrapper) {
  box-shadow: none !important;
}

.reamck {
  border: 1px solid black;
  border-top: 0 none;
}

.reamck-text {
  border-right: 1px solid black;
  padding: 5px;
  text-align: center;
}

.cha {
  display: flex;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid black;
  border-radius: 50%;
  font-size: 26px;
  font-weight: 300;
  box-sizing: border-box;
  line-height: 10px;
}


.select-box {
  position: relative;
}

.select {
  position: absolute;
  width: 30px;
  height: 30px;
  background: white;
  right: 0px;
}
</style>
